<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="search">
      <div class="header">
        <el-row>
          <el-col :span="6">
            <!-- :model="ruleForm" -->
            <!-- :rules="rules" -->
            <el-form ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="素材名称"
                            prop="name">
                <!-- v-model="ruleForm.name" -->
                <el-input v-model="materialName"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="上传者ID"
                            prop="name">
                <!-- v-model="ruleForm.name" -->
                <el-input v-model="inputId"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="素材类别"
                            prop="name">

                <el-select v-model="some1"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
                <el-select v-model="mat_Form1.mat_class1"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="btn">
              <el-button size="small"
                         @click="inquire">查询</el-button>
              <el-button size="small"
                         @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-table :data="tableData"
                  border
                  style="width: 100%">
          <el-table-column prop="name"
                           label="素材名称">
          </el-table-column>
          <el-table-column label="素材图">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px"
                        :src="scope.row.mat_img"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="category"
                           label="素材类别">
          </el-table-column>
          <el-table-column prop="price"
                           label="价格">
          </el-table-column>
          <el-table-column prop="uploader_id"
                           label="上传者ID">
          </el-table-column>
          <el-table-column prop="phone"
                           label="联系电话">
          </el-table-column>
          <el-table-column prop="date"
                           label="素材上架日期">
          </el-table-column>
          <el-table-column prop="sell"
                           label="售出次数">
          </el-table-column>
          <el-table-column prop="earnings"
                           label="素材收益">
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <a href="javascript:;">违规下架</a>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import '@/mock/sourcecheck'
export default {
  name: '',

  components: {},

  props: {},

  data () {
    return {
      options: [
        {
          value: '减肥中心',
          label: '减肥中心'
        },
        {
          value: '七七酒店',
          label: '七七酒店'
        },
        {
          value: '私人影院',
          label: '私人影院'
        },
        {
          value: '盲人按摩',
          label: '盲人按摩'
        }
      ],
      some1: '',
      mat_Form1: {
        mat_name: '',
        mat_class: '',
        mat_class1: '',
        mat_count: '',
        mat_img: ''
      },
      sonOptions: [],
      value: '',
      sonValue: '',
      tableData: [],
      materialName: '',
      inputId: ''
    }
  },
  created () {
    this.getUserSource()
  },
  mounted () {

  },
  methods: {
    async getUserSource () {
      const { data } = await this.$http.get('/usersource')
      this.tableData = data.list
    },
    handleChange () { },
    sonHandleChange () { },
    inquire () {
      var arr = []
      this.tableData.forEach(item => {
        if (item.name.indexOf(this.materialName) !== -1 && this.materialName.trim() !== '') {
          return arr.push(item)
        }
        if (item.uploader_id === this.inputId) {
          return arr.push(item)
        }
      })
      this.tableData = arr
    },
    reset () {
      this.inputId = ''
      this.materialName = ''
      this.getUserSource()
    }
  }
}
</script>

<style scoped lang="less">
</style>
